<template>
	<view>
		<view style="line-height: 90rpx; background-color: aqua; text-align: center;">请求测试</view>
		<view class="out">
			<view class="row" v-for="item in dataList" :key="item.id" @click="goDetail(item.id)">
				<view class="title">{{item.title}}</view>
				<view class="content">{{item.content}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				minPage:5,
				maxPage:5,
				currentPage:5,
				pageSize:10,
				dataList:[]
			};
		},
		methods:{
			goDetail(id){
				uni.navigateTo({
					url: 'test008?id='+id
				});
			},
			getList(currentPage,pageSize,upOrDown){
				uni.showLoading({
				        title: '数据加载中',
				        mask:true
				});
				uni.request({
					url:"http://localhost:9000/test_list?currentPage="+currentPage+'&pageSize='+pageSize,
					timeout:1000,
					success:res=>{
						if(res.statusCode==200){
							if(upOrDown=='up'){//下拉刷新
								this.dataList = res.data.concat(this.dataList);
							}else{//上拉刷新
								this.dataList = this.dataList.concat(res.data);
							}
							
						}else{
							uni.showToast({
								title: res.errMsg,//标题
								mask:true,//魔窗设置
								duration:1500,//提示时间，默认毫秒
								icon:"error" //图标设置，一般使用success（限制7个字）、error（限制7个字）、none(不带任何图标)
								
							});
						}
					},
					fail:err=>{
						uni.showToast({
							title: err.message,//标题
							mask:true,//魔窗设置
							duration:1500,//提示时间，默认毫秒
							icon:"error" //图标设置，一般使用success（限制7个字）、error（限制7个字）、none(不带任何图标)
							
						});
					},
					complete:()=>{
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				})
			}
		},
		/** 
		 * 页面加载完成后得到参数
		 */
		onLoad(e) {
			this.getList(this.currentPage,this.pageSize);
		},
		/**
		 * 下拉刷新（需要配置【pages.json】）
		 */
		onPullDownRefresh() {
			this.minPage = this.minPage-1;
			this.getList(this.minPage,this.pageSize,'up');
		},
		/**
		 * 上拉刷新
		 */
		onReachBottom(){
			this.maxPage = this.maxPage+1;
			this.getList(this.maxPage,this.pageSize,'down');
		}
	}
</script>

<style lang="scss">
	.out{
		padding: 50rpx 30rpx;
		.row{
			padding: 20rpx 0;
			border-bottom: 1rpx dotted #ccc; 
			.title{
				font-size: 36rpx;
				padding-bottom: 15rpx;
				color:#333;
			}
			.content{
				font-size: 28rpx;
				color: #888;
			}
		}
	}
</style>
